<template>
	<view class="bt flex">
	<view class="wenzi" v-for="(item,index) in list" :key="index">
		<text class="zi" :class="{xz:active==index}" @tap="dian(index)">{{item.Text}}</text>
		<view class="di" v-show="active==index" >
			
		</view>
	</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				active:0,
				list:[
					{id:0,Text:'大触直播'},
					{id:1,Text:'大触专访'},
					{id:2,Text:'大触周边'},
				]
			}
		},
		methods:{
			dian(val){
				this.active=val
				this.$emit('tiao',val)
			
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bt{
		width: 100%;
		height: 82rpx;
	
		background-color: #fff;
		.wenzi{
			width: 33%;
			text-align: center;
			color: #a5a5a5;
			font-size: 34rpx;
			position: relative;
		
			.di{
				width: 30%;
				height: 5rpx;
				position: absolute;
				bottom: -20rpx;
				left: 36%;
				background-color: #0395e4;
			}
		}
		.xz{
			 color: #0395e4;
		}
	}
</style>